<template>
  <div class="quality">
    <div class="quality-nav">
      <ul class="nav-links">
        <li class="links-item" :class="{ active: _currentIndex === index - 1 }" @mouseenter="needShow(index)" v-for="(link, index) in navLinks" :key="index">{{ link }}</li>
      </ul>
    </div>
    <div class="quality-content">
      <div class="quality" v-for="(quality, index) in qualityNeedShow" :key="index">
        <img class="quality-img" :src="quality.img" alt="" />
        <h2 class="quality-title">{{ quality.title }}</h2>
        <p class="quality-info">{{ quality.info }}</p>
        <div class="quality-price">
          <span class="current-price-wrapper">
            <span class="price-symbol">￥</span>
            <span class="current-price">{{ quality.price }}</span>
          </span>
          <span class="old-price">门市价{{ quality.old }}</span>
          <span class="quality-addr">{{ quality.addr }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Base from '@/assets/base.js';
const ALL = 0;

export default {
  props: {
    navLinks: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      quality: [],
      current: ALL,
      qualityNeedShow: []
    };
  },
  computed: {
    _currentIndex() {
      return this.current;
    }
  },
  created() {
    let _current = this.current;
    this.$http.get('/quality').then(resp => {
      this.quality = resp.body;
      this.qualityNeedShow = this.quality.filter(function(e) {
        return e.type === _current;
      });
    });
  },
  methods: {
    needShow(type) {
      Base.sleep(200);
      if (type === 0 || this.current === type - 1) return;
      this.current = type - 1;
      let _current = this.current;
      this.qualityNeedShow = this.quality.filter(function(e) {
        return e.type === _current;
      });
    }
  }
};
</script>

<style lang="stylus" rel="stylussheet/stylus">
.quality-nav
  width 100%
  height 2.75rem
  background-color rgb(190, 164, 116)
  background-image linear-gradient(to right, rgb(194, 176, 142) 3%, rgb(190, 164, 116) 100%)
  color #fff
  border-top-right-radius 5px
  border-top-left-radius 5px
  text-align left
  .nav-links
    width 100%
    height 2.75rem
    line-height 2.75rem
    font-size 0
    .links-item
      display inline-block
      font-size 0.875rem
      height 2.75rem
      line-height 2.75rem
      color #FFFFFF
      padding 0 0.3125rem
      cursor pointer
      box-sizing border-box
      &.active
        border-bottom 0.3125rem solid #FFFFFF
      &:first-child
        font-family 'MFShangHei-Regular' !important
        font-size 1.125rem
        font-weight 700
        margin 0 0.625rem 0 0.8125rem
      &:nth-child(n+2):hover
        border-bottom 0.3125rem solid #FFFFFF
.quality-content
  width 100%
  font-size 0
  box-sizing border-box
  border 1px solid #E5E5E5
  border-top none
  padding 0.6875rem 0.625rem 0.625rem 0.625rem
  border-radius 0 0 0.1875rem 0.1875rem
  .quality
    display inline-block
    width 33.3%
    padding 0.625rem
    box-sizing border-box
    border-radius 0.25rem
    &:hover
      background-color #F4F4F4
    .quality-img
      width 100%
      height 13rem
      border-radius 0.25rem
      margin-bottom 0.6875rem
      cursor pointer
    .quality-title
      font-size 16px
      color #222
      height 22px
      line-height 22px
      margin-bottom 8px
      font-weight 500
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      cursor pointer
    .quality-info
      font-size 12px
      color #999
      line-height 18px
      height 18px
      margin-bottom 7px
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
    .current-price-wrapper
      cursor pointer
      .price-symbol
        font-size 14px
        color #BE9E4D
        font-weight 500
      .current-price
        font-size 22px
        color #BE9E4D
        margin-right 6px
        letter-spacing -0.8px
        cursor pointer
    .old-price
      font-size 12px
      color #999
      text-decoration line-through
    .quality-addr
      font-size 12px
      color #999
      float right
      margin-top 10px
</style>
